<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
  html,body{width: 100%;height: 100%;overflow: hidden;}
  .video_wrap{
      position: relative;
      width: 100%;height: 100%;
  }
  #video{
      position: absolute;
      left: 0;
      top: 0;
    width: 100%;height: 100%;
      object-fit: fill;
  }
  .video_cover{
    position: absolute;
      left: 0;
      top: 0;
    width: 100%;height: 100%;
    background: url(video_cover.jpeg) no-repeat;
    background-size: cover;
    z-index: 1;
  }
</style>
<body>
    <div class="video_wrap">
      <video  id="video"></video>
        <div class="video_cover"></div>
    </div>
</body>
<script src="bideo.js"></script>
<script>
      var bv = new Bideo(); //新建一个 Bideo实例
  bv.init({

    videoEl: document.querySelector('#video'), //这个是video标签，放视频链接的地方

    container: document.querySelector('.video_wrap'), //这个是video的父元素，

    resize: true,//视频是否随着窗口变化而变化，必须是true;

    isMobile: window.matchMedia('(max-width: 768px)').matches, //在移动端这个是多大范围开始；

    src: [//视频地址,一个数组，可以放多个视频链接地址
      {
        src: 'night.mp4',
        type: 'video/mp4'
      }
    ],

    onLoad: function () {
      document.querySelector('.video_cover').style.display = 'none';//视频加载后把视频封面隐藏掉，
    }
  });
</script>
</html>